<template>
    <fieldset>
        <legend>计数器</legend>
        <button @click="decrease">-</button>
        &nbsp;
        <!-- 在模版中获取vuex中state的方式 -->
        <!-- <b>{{ $store.state.num }}</b> -->
        <b>{{ num }}</b>
        &nbsp;
        <button @click="increase(10)">+</button>
        <div>{{ reverseMsg }}</div>

        <fieldset>
            <legend>购物车数据</legend>
            <ul>
                <li v-for="item in carts" :key="item.id">{{ item.title }}</li>
            </ul>
        </fieldset>
    </fieldset>
    <h1>模块store中的数据:{{ s }}</h1>
</template>


<script>

//通过辅助函数获取state mutations actions

import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

export default {
    //对于state或者getters这种数据,需要映射在组件的computed属性中

    computed: {
        ...mapState(['msg', 'num', 'carts']),
        ...mapGetters(['reverseMsg']),
        //映射product模块store中的state
        ...mapState('product', ['s'])
    },

    data() {
        return {
            // num: 30
        }
    },
    //mutations是映射在methods这个属性中的
    //actions也需要映射在methods这个属性中
    methods: {
        ...mapMutations(['increase', 'decrease']),
        ...mapActions(['fetchCart']),
        // 映射模块化store中product的mutations
        ...mapMutations('product', ['change_s'])
    },
    mounted() {
        // console.log(this.$store.state.num)

        //可以直接通过this.$store.commit('类型',参数) 触发vuex中的mutation函数

        // setTimeout(() => {
        //     this.$store.commit('increase', 999)
        // }, 3000)

        // -----------------华丽的分割线--------------------

        //通过this.$store.dispatch('actions中的函数名','携带的参数')

        // this.$store.dispatch('fetchCart', 20)

        this.fetchCart(50)
        this.change_s()
    }
}
</script>